<template>
  <div class="app-container">
    <!-- 上面部分 -->
    <head-tool>
      <!-- 自定义右边 -->
      <template #right>
        <el-button @click="mutipleExportExcel" size="small" type="danger"
          >复杂表头导出（跟项目无关，只是为学技术）</el-button
        >
        <el-button @click="exportExcel" size="small" type="success"
          >导出</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="
            $router.push({ path: '/import', query: { type: 'employees' } })
          "
          >导入</el-button
        >
        <el-button
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="showDialog = true"
          >新增员工</el-button
        >
      </template>
    </head-tool>

    <!-- 下面部分 -->
    <el-card>
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="staffPhoto" label="头像">
          <!-- 这里用新语法，其实就是之前写的slot-scope -->
          <template v-slot="{ row }">
            <img
              @click="clickPic(row.staffPhoto)"
              v-imgerror="defaultImg"
              style="width: 60px; height: 60px; border-radius: 50%"
              :src="row.staffPhoto ? row.staffPhoto : defaultImg"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column width="120" prop="mobile" label="手机号" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template v-slot="{ row }">
            <span>{{ row.formOfEmployment | formatHireType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column width="120" prop="timeOfEntry" label="入职时间" />
        <el-table-column prop="enableState" label="状态" />
        <el-table-column width="250" fixed="right" label="操作">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: space-between">
              <el-link
                v-if="checkPoint('POINT_EMP_EDIT')"
                @click="$router.push({ name: 'detail', query: { id: row.id } })"
                type="primary"
                >查看</el-link
              >
              <el-link type="primary">转正</el-link>
              <el-link type="primary">调岗</el-link>
              <el-link type="primary">离职</el-link>
              <el-link @click="doShowRole(row.id)" type="primary">角色</el-link>
              <el-link v-if="checkPoint('POINT_EMP_DEL')" type="primary" @click="doDel(row.id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="text-align: center"
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        :total="pageInfo.total"
        layout="total, prev, pager, next"
        @current-change="loadData"
      />

      <!-- 饿了么ui的组件是懒加载 -->
      <!-- 如果默认没有显示，就不会加载 -->
      <el-dialog :visible.sync="showQrCode" title="二维码">
        <canvas ref="canvas"></canvas>
      </el-dialog>
    </el-card>

    <add-emp :show-dialog.sync="showDialog" />

    <!-- 分配角色的对话框 -->
    <el-dialog title="分配角色" :visible.sync="showRoleDialog">
      <el-checkbox-group v-model="checkRoleList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <div style="margin-top:35px;text-align:center;">
        <el-button size="small">取消</el-button>
        <el-button @click="assignRole" style="margin-left:20px" size="small" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { getEmpList, deleteEmp, saveUserInfo } from '@/api/employees'
import { userProfile } from '@/api/user'
import { roleList } from '@/api/roles'
// 导入组件
import AddEmp from './components/AddEmp.vue'
// 单独导入过滤器函数
import { formatHireType } from '@/filters/filters.js'
// 导入二维码插件
import QRCode from 'qrcode'
export default {
  name: 'Employees',
  components: {
    AddEmp
  },
  data() {
    return {
      // 保存当前员工信息
      userInfo: {},
      checkRoleList: [],
      // 保存所有的角色
      roleList: [],
      showRoleDialog: false,
      // 控制二维码显示
      showQrCode: false,
      // 用来控制新增对话框的显示和隐藏
      showDialog: false,
      defaultImg: require('@/assets/common/head.jpg'),
      tableData: [],
      pageInfo: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },

  created() {
    this.loadData()
  },

  methods: {

    // 保存角色的点击事件
    async assignRole () {

      const res = await saveUserInfo({
        // 拿出员工的其他信息
        ...this.userInfo,
        // 单独改掉roleIds
        roleIds: this.checkRoleList
      })

      // 弹出信息
      this.$message.success(res.message)
      // 关掉对话框
      this.showRoleDialog = false
    },
    // 分配角色的点击事件
    async doShowRole (id) {
      // 先把角色列表数据加载出来
      await this.getRoleList()
      // 加载角色信息
      await this.getUserProfile(id)
      // 显示出对话框
      this.showRoleDialog = true
    },
    // 封装一个获取角色列表的请求
    async getRoleList () {

      const res = await roleList({
        page: 1,
        pagesize: 999999
      })

      this.roleList = res.data.rows
    },
    // 封装一个获取员工基本信息的方法
    async getUserProfile (id) {
      const res = await userProfile(id)
      this.userInfo = res.data;
      // 把获得的员工的角色列表赋值给数组
      this.checkRoleList = res.data.roleIds
    }, 
    // 点击了头像
    async clickPic(url) {
      // 显示出对话框
      this.showQrCode = true
      // dom渲染是异步的，所以此时此刻dialog没有渲染出来
      // dialog都没出来他里面的canvas也没有出来
      // console.log(this.$refs.canvas) // undefined
      // QRCode.toCanvas(this.$refs.canvas, url)
      // 所以我们需要渲染完毕才调用
      await this.$nextTick() // 他内部是通过promise对象封装的
      // 后面的代码一旦是等下次dom渲染完毕调用的
      QRCode.toCanvas(this.$refs.canvas, url)
    },
    // 加载数据
    async loadData() {
      const res = await getEmpList(this.pageInfo)
      this.tableData = res.data.rows
      this.pageInfo.total = res.data.total
    },

    // 删除的点击事件
    doDel(id) {
      this.$confirm('是否确认要删除', '是否删除')
        .then(async() => {
          const res = await deleteEmp(id)
          this.$message.success(res.message)

          // 判断是否最后一条
          if (this.tableData.length == 1 && this.pageInfo.page != 1) {
            this.pageInfo.page--
          }
          // 刷新页面
          this.loadData()
        })
        .catch(() => {})
    },

    // 导出的点击事件
    exportExcel() {
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 一次性查出所有数据
        const res = await getEmpList({
          page: 1,
          size: this.pageInfo.total
        })
        // 用一个数组接收
        const list = res.data.rows
        console.log(list)

        // 准备中英文转换的数组
        const userRelations = {
          入职日期: 'timeOfEntry',
          手机号: 'mobile',
          姓名: 'username',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment'
        }

        // 要弄出一个表头，也就是弄到上面对应的中文
        const header = Object.keys(userRelations)

        // 弄出一个对应的内容(必须是二维数组)
        // 内容有多少个就要产生多少个一样的数组，所以用map
        const data = list.map((v) => {
          // 准备数组
          const arr = []
          // 遍历header（因为要保证表头有多少个才取出多少个属性）
          for (const key in userRelations) {
            // 得到英文key
            const enKey = userRelations[key]

            if (key === '聘用形式') {
              arr.push(formatHireType(v[enKey]))
            } else {
              // 取出对应的值，加到数组里
              arr.push(v[enKey])
            }
          }

          return arr
        })

        // 表头
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: '员工列表', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },

    // 复杂表头
    mutipleExportExcel() {
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 表头
        const header = ['', '年龄', '性别', '成绩']
        // 多表头
        const multiHeader = [
          ['姓名', '班级', '', ''],
          ['', '学校', '', '']
        ]
        // 合并单元格
        const merges = ['A1:A3', 'B1:D1', 'B2:D2']

        const data = [
          ['张三', 16, '男', 94],
          ['老六', 19, '男', 100],
          ['雅芙', 15, '女', 100]
        ]
        // 表头
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          // 多表头
          multiHeader,
          // 设置合并单元格
          merges,
          filename: '员工列表', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    }
  }
}
</script>

<style>
</style>
